<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单</title>
</head>
<body>
  <!-- 基本结构 -->
  <form action="https://www.baidu.com/s">
    <input type="text" name="wd">
    <button>搜索</button>
  </form>
  <form action="https://search.jd.com/search" target="_blank" method="post">
    <input type="text" name="keyword">
    <button>去京东搜索</button>
  </form>
  <hr>

  <!-- 常用控件、禁用控件、label标签 -->
  <form action="https://search.jd.com/search">
    <!-- 文本输入框 -->
    <!-- label 用法一 -->
    <label>
      <span>账户</span>
      <input type="text" name="account" value="zhangsan" maxlength="10">
    </label>
    <br>
    <!-- label 用法二 label 标签的 for 属性和 input 标签的 id 关联-->
    <label for="account">账户</label>
    <input id="account" type="text" name="account" value="zhangsan" maxlength="10">
    <br>
    账户：<input type="text" name="account" value="zhangsan" maxlength="10" disabled><br>
    <!-- 密码输入框 -->
    密码：<input type="password" name="pwd" value="123456" maxlength="6"><br>
    <!-- 单选框 -->
    性别：
    <input type="radio" name="sex" value="male">男
    <input type="radio" name="sex" value="female" checked>女
    <br>
    <!-- 多选框 -->
    爱好：
    <input type="checkbox" name="hobby" value="smoke">抽烟
    <input type="checkbox" name="hobby" value="drink" checked>喝酒
    <input type="checkbox" name="hobby" value="perm">烫头
    <br>
    <!-- 隐藏域 -->
    <input type="hidden" name="form" value="toutiao">
    其他：
    <textarea name="other" cols="30" rows="3"></textarea><br>
    籍贯：
    <select name="place"> 
      <option value="湖南长沙">湖南长沙</option>
      <option value="湖北武汉" selected>湖北武汉</option>
      <option value="陕西西安">陕西西安</option>
    </select>
    <br>
    <!-- 确认按钮 -->
    <input type="submit">
    <!-- 取消按钮 -->
    <input type="reset">
    <!-- 普通按钮 -->
    <input type="button" value="检测账户是否被注册">
    <button type="button">提交</button>
  </form>

  <hr>

  <!-- fieldset 与 legend -->
  <form action="https://search.jd.com/search">
    <fieldset>
      <legend>主要信息</legend>
      <label>
        <span>账户</span>
        <input type="text" name="account" value="zhangsan">
      </label>
      <label>
        <span>密码</span>
        <input type="password" name="pwd" value="123456">
      </label>
      <label>
        <span>性别</span>
        <input type="radio" name="gender" value="male">
        <span>男</span>
        <input type="radio" name="gender" valu="female">
        <span>女</span>
      </label>
    </fieldset>
    <fieldset>
      <legend>附加信息</legend>
      <label>
        <span>爱好</span>
        <input type="checkbox" name="hobby" value="smoke">
        <span>抽烟</span>
        <input type="checkbox" name="hobby" value="drink">
        <span>喝酒</span>
        <input type="checkbox" name="hobby" value="perm">
        <span>烫头</span>
      </label>
      <label>
        <span>其他</span>
        <textarea name="other" cols="30" rows="3"></textarea>
      </label>
      <label>
        <span>籍贯</span>
        <select name="place">
          <option value="湖南长沙">湖南长沙</option>
          <option value="湖北武汉">湖北武汉</option>
          <option value="陕西西安">陕西西安</option>
        </select>
      </label>
    </fieldset>
  </form>
</body>
</html>